<!--
 * @Author: June
 * @Date: 2023-10-23 10:24:32
 * @LastEditors: June
 * @LastEditTime: 2023-10-23 11:19:33
 * @Description: 按钮组
 * 
-->
<template>
  <div class="content-container pos">
    <ul>
      <li v-for="item in btnList" :key="item.name" @click="item.click && item.click()">
        <div class="top">
          <i class="iconfont" :style="{ color: themeColor }" :class="item.icon"></i>
        </div>
        <div class="bottom" :style="{ '--themeColor': themeColor }">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  computed: {},
  data() {
    return {
      btnList: [
        {
          name: '前页',
          icon: 'icon-qianye'
        },
        {
          name: '后页',
          icon: 'icon-houye'
        },
        {
          name: '新增',
          icon: 'icon-xinzeng'
        },
        {
          name: '删除',
          icon: 'icon-shanchu',
          click: () => {
            this.$emit('deleteCancel')
          }
        },
        {
          name: '查找',
          icon: 'icon-chaozhao'
        },
        {
          name: '复核',
          icon: 'icon-fuhe'
        },
        {
          name: '审核',
          icon: 'icon-shenhe'
        },
        {
          name: '保存',
          icon: 'icon-baocun',
          click: () => {
            this.$emit('submitForm')
          }
        },
        {
          name: '打印',
          icon: 'icon-dayin'
        },
        {
          name: '导出',
          icon: 'icon-daochu'
        },
        {
          name: '更多',
          icon: 'icon-gengduo'
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
ul {
  display: flex;
  // background: #f5f5f5;
  background: #fff;
  border-radius: 5px;
  padding-left: 10px;
  justify-content: left;
  // border-bottom: 1px solid #ccc;
  li {
    list-style: none;
    width: 35px;
    text-align: center;
    margin: 0 10px 0px 0;
    &:hover {
      .bottom {
        color: var(--themeColor);
      }
    }
    .top {
      height: 25px;
      line-height: 25px;
      // border-radius: 10px;
      background: #fff;
      cursor: pointer;
      &:hover {
        border-radius: 50%;
        transition: all 0.3s;
      }
      i {
        color: #409eff;
        font-weight: bold;
        font-size: 18px;
      }
    }
    .bottom {
      height: 25px;
      line-height: 25px;
      font-size: 12px;
    }
  }
}
</style>